<template>
  <view class="weather-page">
    <!-- 加载提示 -->
    <view v-if="loading" class="loading-container">
      <view class="loading-spinner"></view>
      <text class="loading-text">加载中...</text>
    </view>
    
    <!-- 天气预报内容 -->
    <view v-else class="weather-content">
      <web-view :src="h5Url"></web-view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      h5Url: '',
      loading: true
    }
  },
  
  onLoad() {
    // 构建 H5 页面地址 - 东三省天气预报（风场）
    this.h5Url = 'https://ws.waterism.tech:8444/#/pages/weather/forecast';
    
    console.log('天气预报页面加载:', this.h5Url);
    
    // 模拟加载延迟
    setTimeout(() => {
      this.loading = false;
    }, 500);
  },
  
  onShow() {
    console.log('天气预报页面显示');
  }
}
</script>

<style scoped>
.weather-page {
  width: 100%;
  height: 100vh;
  background: #f5f6f7;
}

.loading-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.loading-spinner {
  width: 80rpx;
  height: 80rpx;
  border: 6rpx solid #e5e5e5;
  border-top-color: #07c160;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

.loading-text {
  margin-top: 32rpx;
  font-size: 28rpx;
  color: #999999;
}

.weather-content {
  width: 100%;
  height: 100%;
}
</style>
